<template>
  <div id="loginDiv">
    <el-tabs :value="module" @tab-click="changeTab">
      <el-tab-pane
        v-for="tab in tabs"
        :label="tab.label"
        :name="tab.key"
        :key="tab.key"
      ></el-tab-pane>
    </el-tabs>
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          type="text"
          v-model="loginForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model="loginForm.pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" v-show="module == 'register'">
        <el-input
          type="password"
          v-model="loginForm.confirmPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-col :span="11">
          <el-input type="text" v-model="loginForm.code"></el-input>
        </el-col>
        <el-col :span="11">
          <el-button :disabled="loginForm.codeBtnStatu" @click="getSms">{{
            loginForm.codeBtnLabel
          }}</el-button>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :disabled="loginForm.btnStatu"
          @click="submitForm('loginForm')"
          >{{ loginForm.btnLabel }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getSms, register } from "@/api/login";
import { validateInput } from "@/utils/validate";

export default {
  data: function() {
    return {
      tabs: [
        {
          label: "登录",
          key: "login"
        },
        {
          label: "注册",
          key: "register"
        }
      ],
      module: "login",
      loginForm: {
        username: "842328916@qq.com",
        pass: "123456",
        confirmPass: "123456",
        code: "",
        codeBtnLabel: "获取验证码",
        codeBtnStatu: false,
        btnLabel: "登录",
        btnStatu: true
      },
      rules: {
        pass: [{ validator: validateInput, trigger: "blur" }],
        comfirmPass: [{ validator: validateInput, trigger: "blur" }],
        username: [{ validator: validateInput, trigger: "blur" }],
        code: [{ validator: validateInput, trigger: "blur" }]
      }
    };
  },
  methods: {
    changeTab(tab) {
      this.module = tab.name;
      this.loginForm.btnLabel = this.tabs.find(
        item => item.key == tab.name
      ).label;
      this.loginForm.btnStatu = true;
      this.$refs["loginForm"].resetFields();
    },
    getSms() {
      if (this.loginForm.username == "") {
        this.$message.error("请输入用户名");
        return false;
      }

      this.loginForm.codeBtnLabel = "发送中...";
      this.loginForm.codeBtnStatu = true;

      let params = {
        username: this.loginForm.username,
        module: this.module
      };
      getSms(params)
        .then(res => {
          this.$message({
            message: res.message,
            type: "success"
          });
          if (res.message.match(/[^a-zA-Z0-9 ]/g)) {
            this.loginForm.code = res.message.replace(/[^a-zA-Z0-9 ]/g, "");
          }
          this.loginForm.btnStatu = false;
          let i = 10;
          let countDown = setInterval(() => {
            i--;
            this.loginForm.codeBtnLabel = `倒计时 ${i} 秒`;
            if (i <= 0) {
              this.loginForm.codeBtnLabel = "重新获取";
              this.loginForm.codeBtnStatu = false;
              clearInterval(countDown);
            }
          }, 1000);
        })
        .catch(error => {
          this.$message.error(error.message);
          this.loginForm.codeBtnLabel = "重新获取";
          this.loginForm.codeBtnStatu = false;
        });
    },
    login() {
      let params = {
        username: this.loginForm.username,
        password: this.loginForm.pass,
        code: this.loginForm.code,
        module: this.module
      };
      this.$store
        .dispatch("login", params)
        .then(res => {
          this.$message({
            message: res.message,
            type: "success"
          });
          this.$router.push("/index");
        })
        .catch(error => {
          this.$message.error(error.message);
        });
    },
    register() {
      let params = {
        username: this.loginForm.username,
        password: this.loginForm.pass,
        code: this.loginForm.code,
        module: this.module
      };
      register(params)
        .then(res => {
          this.$message({
            message: res.message,
            type: "success"
          });
        })
        .catch(error => {
          this.$message.error(error.message);
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.module == "register") {
            this.register();
          } else if (this.module == "login") {
            this.login();
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped></style>
